<!--  -->
<template>
  <div class="banner">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(item, index) in bannerInfo" :key="index">
        <div class="img_wrap">
          <el-image
            @click="changeUrl(item)"
            :src="item.imageUrl"
            fit="contain"
            style="height: 200px; border-radius: 10px"
          >
          </el-image>
          <el-tag
            :type="item.typeTitle === '独家' ? 'danger' : 'primary'"
            effect="dark"
            style="
              position: absolute;
              bottom: 2%;
              right: 3%;
              border-radius: 5px;
            "
          >
            {{ item.typeTitle }}
          </el-tag>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    bannerInfo: [],
  },
  methods: {
    changeUrl(item) {
      // console.log(item);
      //歌曲
      if (item.targetType == 1) {
        this.$store.dispatch("musicPlay/saveSongId", item.targetId);
        sessionStorage.setItem("songId", item.targetId);
      }
      //专辑
      else if (item.targetType == 10) {
        this.$router.push("albumDetail/" + item.targetId);
        // console.log(item.targetId);
      }
      //歌单
      else if (item.targetType == 1000) {
        this.$router.push("songListPage/" + item.targetId);
      }
    },
  },
};
</script>

<style lang='less' scoped>
.banner {
  // padding: 0 5.25rem;
  .el-carousel {
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    text-align: center;
    .el-carousel__container{
      .el-carousel-item {
        .img_wrap{
          .el-image {
          img{
              border-radius: 15px;
            }
          }
        }
      }
    }
  }
}
</style>